<template>
    <div class="create_order">
        <header-test name="生成订单" :back="'/cart'" />
        <van-contact-card
            type="edit"
            :tel="addressDetail.tel"
            :name="addressDetail.name"
            @click="onEdit"
        />
        <div class="goog_list">
            <div
                v-for="good_item in goodList"
                :key="good_item.cartItemId"
                class="good_item"
            >
                <img :src="good_item.goodsCoverImg" alt="" class="good_pic"/>
                <div class="good_info">
                    <div class="good_info_name">
                        <span>{{ good_item.goodsName }}</span>
                        <span>x{{ good_item.goodsCount }}</span>
                    </div>
                    <div class="good_sellingPrice">￥{{ good_item.sellingPrice }}</div>
                </div>
            </div>
        </div>
        <div class="create_footer">
            <div class="create_footer_text">
                <span>商品价格</span><span class="add_price">￥{{ price }}</span>
            </div>
            <div class="create_footer_btn" @click="handleCreateOrder">生成订单</div>
        </div>
        <div class="pop_order">
            <van-popup
                v-model:show="show"
                position="bottom"
                :style="{height:'35%'}"
                closeable
                @close="goToOrder"
            >
                <div class="pop_order_con">
                    <van-button
                        type="primary"
                        block
                        @click="handlePayOrder({ payType:1 })"
                    >支付宝支付</van-button>
                    <van-button
                        plain
                        class="wx_btn"
                        @click="handlePayOrder({ payType:2 })"
                    >微信支付</van-button>
                </div>
            </van-popup>
        </div>
    </div>
</template>

<script>
import HeaderTest from '@/components/HeaderTest.vue';
import { reactive,toRefs } from '@vue/reactivity';
import { computed, onMounted } from "@vue/runtime-core";
import { getCart } from '@/service/cart';
import { getDefaultAddress } from '@/service/address';
import { createOrder,payOrder } from '@/service/order';
import { useRouter } from 'vue-router';
import { Toast } from 'vant';

export default {
    components: {HeaderTest},
    setup() {
        const router = useRouter();
        const state = reactive({
            addressDetail: {},
            goodList: [],
            show:false,
            orderNo:"",
        });
        onMounted(async()=>{
            Toast.loading({message:"加载中...",forbidClick:true});
            const {data:addressDetail} = await getDefaultAddress("default");
            if (!addressDetail) {
                router.push({
                    path:"/address",
                });
                return;
            }
            const { data } = await getCart();
            if(!data.length){
                router.push("/cart");
            }
            state.goodList = data;
            state.addressDetail = {
                name:addressDetail.userName,
                tel:addressDetail.userPhone,
                addressId:addressDetail.addressId,
            };
            Toast.clear();
        });
        const price = computed(()=>{
            return state.goodList.reduce((addPrice,item)=>{
                return (addPrice+=item.sellingPrice * item.goodsCount);
            }, 0);
        });
        const handleCreateOrder = async ()=>{
            state.show =! state.show;
            const { addressId } = state.addressDetail;
            const cartItemIds = state.goodList.map((item)=>item.cartItemId);
            const { data: orderNo } = await createOrder({ addressId,cartItemIds });
            state.orderNo = orderNo;
        };
        const goToOrder = () => {
            router.push("/my-order");
        };
        const onEdit = () => {
            router.push({
                path:"/address",
            });
        };
        const handlePayOrder = async({payType})=>{
            try {
                await payOrder({
                    orderNo:state.orderNo,
                    payType,
                });
                Toast.success("支付成功");
                state.show = ! state.show;
            } catch(error){
                console.log(error);
                Toast.success("支付失败！");
            }
        };
        return {
            ...toRefs(state),
            onEdit,
            price,
            handleCreateOrder,
            handlePayOrder,
            goToOrder,
        };
    },
};

</script>

<style lang="less" scoped>
@import "@/common/style/mixin.less";
.create_order {
    background: #f9f9f9;
    .goog_list {
        background: white;
        margin-top: 1.25rem;
        padding: 0.7rem;
        .good_item {
            height: 7rem;
            display: flex;
            .good_pic {
                width: 6.25rem;
                height: 6.25rem;
            }
            .good_info {
                height: 3.5rem;
                padding: 1.25rem;
                text-align: left;
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .good_info_name {
                    font-size: 0.8rem;
                    display: flex;
                    justify-content: space-between;
                }
                .good_sellingPrice {
                    color: red;
                    font-size: 1rem;
                }
            }
        }
    }
    .create_footer {
        height: 6.25rem;
        width: 100%;
        position: fixed;
        left: 0%;
        bottom: 0;
        background: white;
        padding: 0 1rem;
        padding-bottom: 0.3rem;
        box-sizing: border-box;
        .create_footer_text {
            display: flex;
            justify-content: space-between;
            padding: 0.7rem 0;
            .add_price {
                color: red;
            }
        }
        .create_footer_btn {
            height: @headerHeight;
            background: @primary;
            color: white;
            line-height: @headerHeight;
        }
    }
    .pop_order {
        display: flex;
        padding: 30% auto;
        .pop_order_con {
            width: 90%;
            margin:15% auto;
            overflow: hidden;
        }
        .wx_btn {
            background: rgb(79, 192, 142);
            width: 100%;
            color: white;
            margin-top: 1.5rem;
        }
    }
}











</style>